<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
<title>支付网关配置</title>
<%@ include file="../../common/base.jsp" %>
</head>

<body id="body">
<!--head-->
<div id="head">
	<%@ include file="../../common/head.jsp" %>
</div>
<!--head end-->
<!--container-->
<div id="container">
	<div id="pageId" style="display: none;">05-05-02</div>
		<!--sidebar-->
		<%@ include file="../../common/menu.jsp" %>
	    <!--sidebar-->
    <!--main-->
    <div class="main">
    	<div class="location" style="background-position:22px -149px;">
        	系统配置<span>&gt;</span>收银台管理<span>&gt;</span>支付网关配置
        </div>
        <!--content-->
        <div class="content">
            <button type="button" class="btn btn_add" style="float: right;margin-top:0px;" onClick="showWindow('','add');">添加</button>
            <table class="table_type1">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>支付网关类型</th>
                        <th>支付网关名称</th>
                        <th>权重</th>
                        <th>商户号</th>
                        <th>交易类型</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="bodyResult"></tbody>
            </table>
        </div>
        <!--content-->
        <!--foot-->
        <div id="foot">
        	<p>北京掌中彩信息科技有限公司  提供技术支持</p>
        </div>
        <!--foot-->
    </div>
    <!--main-->
</div>
<!--container-->
<!--遮罩层-->
<div id="mask" style="display:none;"></div>
<!--遮罩层-->
<!--弹出框1-->
<div id="popBox" style="width:450px; margin-left:-200px; top:8%;display:none;" class="popSave">
	<h2></h2>
    <a href="javascript:;" class="close" onClick="$(this).parent('#popBox').hide(); $('#mask').hide()"></a>
    <div class="pop_content">
    	<form action="">
    		<input type="hidden" name="payChannelId">
    		<ul class="inputInfoList3">
	        	<li>
	            	<label>支付网关类型</label>
	                <select name="paychannelType" id="paychannelType">
	                	<c:forEach items="${payChannelTypeList }" var="payChannelType">
		                	<option value="${payChannelType.paychannelType }">${payChannelType["paychannelTypeName"] }</option>
	                	</c:forEach>
	                </select>
	                <input type="hidden" name="paychannelType">
	            </li>
	        	<li>
	            	<label>支付网关名称</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" class="text" name="payChannelName"  id="_payChannelName" onBlur="payChannelNameValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="20"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>权重</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" class="text" name="weight"  id="_weight" onBlur="weightValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="2"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>商户号</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"  class="text" name="channelUser" id="_channelUser" onBlur="channelUserValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="30"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>登录账号</label>
	            	<input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"  class="text" name="channelName" id="_channelName" onBlur="channelNameValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="30"/>
	                <span class="red">*</span>
	            </li> 
	            <li>
	            	<label>MD5密钥</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"  class="text" name="md5Key" id="_md5Key" onBlur="md5KeyValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="100"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>前台回调地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'"  class="text" name="callBackUrl" id="_callBackUrl" onBlur="callBackUrlValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="150"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>后台通知地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" class="text" name="notifyUrl" id="_notifyUrl" onBlur="notifyUrlValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="150"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>支付地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" class="text" name="payUrl" id="_payUrl" onBlur="payUrlValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="150"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>批量支付地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" class="text" name="payUrlBatch" id="_payUrlBatch" onBlur="payUrlBatchValide(this); this.style.border = '1px solid #D5D5D5'" maxlength="150"/>
	                <span class="red">*</span>
	            </li>
	            <li>
	            	<label>查询地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" onBlur="this.style.border = '1px solid #D5D5D5'" class="text" name="queryUrl" maxlength="150"/>
	            </li>
	            <li>
	            	<label>批量查询地址</label>
	                <input type="text" onFocus="this.style.border = '1px solid #2A7CCF'" onBlur="this.style.border = '1px solid #D5D5D5'" class="text" name="queryUrlBatch" maxlength="150"/>
	            </li>
	            <li>
	            	<label>交易类型</label>
	                <select name="payType">
	                	<option value="0">充值</option>
	                	<option value="1">提现</option>
	                </select>
	            </li>
	            <li>
	            	<label>是否可用</label>
	                <select name="status">
	                	<option value="0">可用</option>
	                	<option value="1">不可用</option>
	                </select>
	            </li>
	            <li>
	            	<label>个性字段</label>
	                <textarea rows="3" name="jsonConfig"></textarea>
	            </li>
	        </ul>
    	</form>
    </div>
    <div class="pop_button">
    	<a id="saveBtn" href="javascript:void(0);">保存</a>
        <a href="javascript:reset('save');" id="resetBtn">重置</a>
    </div>
</div>
<!--弹出框1-->
<!--弹出框2-->
<div id="popBox" style="width:450px; margin-left:-200px; top:8%;display:none;" class="popDetails">
	<h2>详情</h2>
    <a href="javascript:;" class="close" onClick="$(this).parent('#popBox').hide(); $('#mask').hide()"></a>
    <div class="pop_content">
		<ul class="infoList">
        	<li>
            	<label>支付网关类型</label>
                <p><input id="paychannelTypeName"/></p>
            </li>
        	<li>
            	<label>支付网关名称</label>
                <p><input id="payChannelName"/></p>
            </li>
            <li>
            	<label>权重</label>
                <p><input id="weight"/></p>
            </li>
            <li>
            	<label>商户号</label>
                <p><input id="channelUser"/></p>
            </li>
            <li>
            	<label>登录账号</label>
                <p><input id="channelName"/></p>
            </li> 
            <li>
            	<label>MD5密钥</label>
                <p><input id="md5Key"/></p>
            </li>
            <li>
            	<label>前台回调地址</label>
                <p><input id="callBackUrl"/></p>
            </li>
            <li>
            	<label>后台通知地址</label>
                <p><input id="notifyUrl"/></p>
            </li>
            <li>
            	<label>支付地址</label>
                <p><input id="payUrl"/></p>
            </li>
            <li>
            	<label>批量支付地址</label>
                <p><input id="payUrlBatch"/></p>
            </li>
            <li>
            	<label>查询地址</label>
                <p><input id="queryUrl"/></p>
            </li>
            <li>
            	<label>批量查询地址</label>
                <p><input id="queryUrlBatch"/></p>
            </li>
            <li>
            	<label>交易类型</label>
                <p><input id="payTypeDesc"/></p>
            </li>
            <li>
            	<label>是否可用</label>
                <p><input id="statusDesc"/></p>
            </li>
            <li>
            	<label>个性配置</label>
                <p><input id="jsonConfig"/></p>
            </li>
        </ul>
    </div>
    <div class="pop_button">
        <a href="javascript:;" onClick="$('.popDetails').hide();$('#mask').hide();">关闭</a>
    </div>
</div>
<!--弹出框2-->

<script src="${pageContext.request.contextPath}/static/js/basic.js"></script>
<script type="text/javascript">

function payChannelNameValide(e){
	return regValide(e, /\S/, "支付网关名称不能为空!", true);
}
function weightValide(e){
	return regValide(e, /^([0-9]+)$/, "权重不能为空,且为两位有效数字!", true);
}

function channelUserValide(e){
	return regValide(e, /\S/, "商户号不能为空!", true);
}

function md5KeyValide(e){
	return regValide(e, /\S/, "MD5密钥不能为空!", true);
}

function channelNameValide(e){
	return regValide(e, /\S/, "登录账号不能为空!", true);
}

function callBackUrlValide(e){
	return regValide(e, /\S/, "前台回调地址不能为空!", true);
}

function notifyUrlValide(e){
	return regValide(e, /\S/, "后台通知地址不能为空!", true);
}

function payUrlValide(e){
	return regValide(e, /\S/, "支付地址不能为空!", true);
}

function payUrlBatchValide(e){
	return regValide(e, /\S/, "批量支付地址不能为空!", true);
}

function queryPayChannelList(){
	$.ajax({
		   type: "POST",
		   url: "${pageContext.request.contextPath}/cashierManager/queryPayChannelList",
		   dataType:"json",
		   success: function(data){
				var result = data.payChannelList;
				var content = "";
				for (var i = 0; i < result.length; i++) {
					content += "<tr>"+
                    	"<td>"+(i+1)+"</td><td>"+result[i].PAYCHANNEL_TYPE_NAME+"</td><td>"+result[i].PAY_CHANNEL_NAME+"</td><td>"+result[i].WEIGHT+"</td><td>"+result[i].CHANNEL_USER+"</td><td>"+result[i].PAY_TYPE_DESC+"</td><td>"+result[i].STATUS_DESC+"</td>"+
                        "<td class='operate'>"+
                            "<div class='btn_operate'>"+
                                "<a href='#'>详情</a>"+
                                "<ul>"+
                                    "<li><a href='javascript:showWindow(\""+result[i].PAY_CHANNEL_ID+"\",\"details\");'>详情</a></li>"+
                                    "<li><a href='javascript:modifyStatus(\""+result[i].PAY_CHANNEL_ID+"\","+(result[i].STATUS==0?1:0)+");'>"+(result[i].STATUS==0?'禁用':'启用')+"</a></li>"+
                                    "<li><a href='javascript:showWindow(\""+result[i].PAY_CHANNEL_ID+"\",\"update\");'>修改</a></li>"+
                                    /* "<li><a href='javascript:del(\""+result[i].PAY_CHANNEL_ID+"\");'>删除</a></li>"+ */
                                "</ul>"+
                            "</div>"+
                        "</td>"+
                    "</tr>";
			    }
			    $("#bodyResult").html(content);
			    setting();
	      }
   	});
}

function setting(){
	//操作鼠标划过
	var $btn_operate=$(".operate .btn_operate").children("a");
	var $operate_list=$(".operate ul");
	$btn_operate.mouseenter(function(){
		$(this).css("visibility","hidden").siblings("ul").show();	
	});
	$operate_list.mouseleave(function(){
		$(this).hide().siblings("a").css("visibility","visible");	
	});
}

function queryByChannelId(payChannelId,className){
	$.ajax({
		   type: "POST",
		   url: "${pageContext.request.contextPath}/cashierManager/queryByChannelId",
		   dataType:"json",
		   data:{
		   		payChannelId:payChannelId
		   },
		   success: function(data){
		   		var result = data.payChannel;
		   		if (result!=null) {
					$("#mask").show();
			   		if ("popSave"==className) {//回写修改页内容
						$(".popSave input,textarea").each(function(i,e){
							var val = result[$(e).attr("name")];
							$(e).val(val==null?"":val);
						});
						$(".popSave select").each(function(i,e){
							var val = result[$(e).attr("name")];
							$(e).find("option[value='"+val+"']").attr("selected",true);
						});
						$(".popSave").show();
					} else if ("popDetails"==className) {//回写详细页内容
						$(".popDetails input").each(function(i,e){
							var val = result[$(e).attr("id")];
							$(e).val(val==null?"":val);
							$(e).attr("style","border:none;width:97%;");
							$(e).attr("readOnly",true);
						});
						$(".popDetails").show();
					}
				} else {
					console.log("data.payChannel is null!");
				}
		   }
   	});
}

function reset(type){
	if (type=="save") {
		$(".popSave input,textarea").each(function(i,e){
			$(e).val("");
		});
		$(".popSave select").each(function(i,e){
			$(e).find("option:first").prop("selected", true);
		});
		$(".s_tips,.e_tips,.zhu_shi_1").each(function(i,e){
			$(e).remove();
		});
	}else if (type=="details") {
		$(".popDetails p").each(function(i,e){
			$(e).val("");
		});
	}
}

/**
**type: add,update,details
**/
function showWindow(payChannelId,type){
	if ("add"==type) {
		$(".popSave h2").text("添加");
		$("#paychannelType").attr("disabled",false);
		$("#saveBtn").attr("onclick","savePayChannel(\"cashierManager/addPayChannel\");");
		$("#resetBtn").show();
		reset("save");
		$("#mask").show();
		$(".popSave").show();
	}else if ("update"==type) {
		$(".popSave h2").text("修改");
		$("#paychannelType").attr("disabled",true);
        $("#saveBtn").attr("onclick","savePayChannel(\"cashierManager/updatePayChannel\");");
		$("#resetBtn").hide();
		reset("save");
		queryByChannelId(payChannelId,"popSave");
	}else if ("details"==type) {
		reset("details");
		queryByChannelId(payChannelId,"popDetails");
	}
}

//表格排序表头样式
$(document).ready(function(e) {
	queryPayChannelList();
	
});

/**
修改状态 
status 0：启用；1：禁用
**/
function modifyStatus(payChannelId,status){
	prompt.confirm("是否"+(status==0?"启用":"禁用")+"该收银平台？",function(){
		$.ajax({
			   type: "POST",
			   url: "${pageContext.request.contextPath}/cashierManager/updatePayChannel",
			   dataType:"json",
			   data:{
			   		payChannelId:payChannelId,
			   		status:status,
			   		paychannelType:-1,
			   		payType:-1
			   },
			   success: function(data){
			   		if (data.errorCode==0) {
				   		queryPayChannelList();
					}
			   }
	   	});
	});
}

function savePayChannel(url){
	if (!payChannelNameValide($("#_payChannelName"))) {
		return;
	}
	if (!weightValide($("#_weight"))) {
		return;
	}
	if (!channelUserValide($("#_channelUser"))) {
		return;
	}
	if (!md5KeyValide($("#_md5Key"))) {
		return;
	}
	if (!callBackUrlValide($("#_callBackUrl"))) {
		return;
	}
	if (!notifyUrlValide($("#_notifyUrl"))) {
		return;
	}
	if (!payUrlValide($("#_payUrl"))) {
		return;
	}
	if (!payUrlBatchValide($("#_payUrlBatch"))) {
		return;
	}
	$.ajax({
	   type: "POST",
	   url: "${pageContext.request.contextPath}/"+url,
	   dataType:"json",
	   data: $("form").serialize(),
	   success: function(data){
	   		if (data.errorCode==0) {
	   			$("#mask").hide();
				$(".popSave").hide();
			}
			prompt.alert(data.msg,function(){
				if (data.errorCode==0) {
					queryPayChannelList();
				}
			});
	   }
  	});
}

function del(payChannelId){
	prompt.confirm("您确定要删除吗？",function(){
		$.ajax({
			   type: "POST",
			   url: "${pageContext.request.contextPath}/cashierManager/delPayChannel",
			   dataType:"json",
			   data: {
			   		payChannelId:payChannelId
			   },
			   success: function(data){
					prompt.alert(data.msg,function(){
						if (data.errorCode==0) {
							queryPayChannelList();
						}
					});
			   }
	   	});
	});
}

</script>
</body>
</html>